<script setup>
import { ref } from 'vue'
import {  changePasswordService } from '@/api/user.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();
const passwordChange=ref({
    password:'',
    modifiedPassword:'',
    againModifiedPassword:''
})
const changePassword=async()=>{
    let result=await changePasswordService(passwordChange.value)
    if(result.data!='修改密码成功'){
        ElMessage.error(result.data)
    }else{
        ElMessage.success("密码修改成功")
        router.push({path:"/announcement/getLatestNotice"})
    }
}
const cancel=()=>{
    router.push({path:"/announcement/getLatestNotice"})
}

</script>
<template>
     <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>修改密码</span>
            </div>
        </template>
        <el-row>
            <el-col :span="12">
                <el-form :model="passwordChange"  label-width="100px" size="large">
                    <el-form-item label="原始密码">
                        <el-input v-model="passwordChange.password" ></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" >
                        <el-input  type="password" show-password v-model="passwordChange.modifiedPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" >
                        <el-input   type="password" show-password v-model="passwordChange.againModifiedPassword"></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="changePassword">确认</el-button>
            </el-col>
        </el-row>
    </el-card>
</template>